<template>
  <!-- 添加或修改菜单对话框 -->
  <!-- custom-class
       form 弹窗 默认必加--------------------------------------------------------
       dialogForm            =>  默认控制样式区域 管理部分公用样式
       form 弹窗 按布局格式添加 --------------------------------------------------
       dialogFormItemUDForm  =>  控制 form-item (label 、content) 上下布局样式 控制
       dialogFormItemLRForm  =>  控制 form-item (label 、content) 左右布局样式 控制
  -->
  <el-dialog v-loading="dialogFormLoading" :title="dialogFormTitle" custom-class="dialogForm dialogFormItemUDForm" :visible.sync="dialogFormVisibleBool" width="600px" :show-close="false">
    <el-form ref="dialogForm" :model="dialogForm" :rules="dialogFormType!=='view'?dialogRules:{}"
             :class="dialogFormType==='view'?'formTable p-px-t-14':'p-px-t-4'" :label-width="dialogFormType==='view'?(4* 1.4 + 1.2 + 1.2 + 'rem' ):''">
      <el-row class="formRow" :gutter="dialogFormType==='view'?0:24">
        <el-col :span="12">
          <el-form-item label="真实姓名" prop="nickName">
            <el-input
              v-model.trim="dialogForm.nickName"
              maxlength="30"
              show-word-limit
              placeholder="请输入真实姓名"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="归属部门" prop="deptId">
            <treeselect
              v-model.trim="dialogForm.deptId"
              :options="deptOptions"
              :show-count="true"
              placeholder="请选择归属部门"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="手机号码" prop="phoneNumber">
            <el-input
              v-model.trim="dialogForm.phoneNumber"
              placeholder="请输入手机号码"
              show-word-limit
              maxlength="11"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="办公电话" prop="officeTelephone">
            <el-input
              v-model.trim="dialogForm.officeTelephone"
              placeholder="请输入办公电话"
              show-word-limit
              maxlength="11"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            label="用户名称"
            prop="userName"
          >
            <el-input
              v-model.trim="dialogForm.userName"
              maxlength="30"
              show-word-limit
              placeholder="请输入用户名称"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item
            v-if="dialogForm.userId == undefined"
            label="用户密码"
            prop="password"
          >
            <el-input
              v-model.trim="dialogForm.password"
              placeholder="请输入用户密码"
              maxlength="16"
              type="password"
            />
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="用户性别">
            <el-select
              v-model.trim="dialogForm.sex"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="dict in sysUserSexOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-radio-group v-model.trim="dialogForm.status">
              <el-radio
                v-for="dict in sysNormalDisableOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >
                {{ dict.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="orderNum">
            <el-input
              v-model.trim="dialogForm.orderNum"
              controls-position="right"
              maxlength="3"
              show-word-limit
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色" prop="roleIds">
            <el-select
              v-model.trim="dialogForm.roleIds"
              filterable
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in roleOptions"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
                :disabled="item.status == 0"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否领导">
            <el-radio-group v-model="dialogForm.isLeader">
              <el-radio :label="0">
                否
              </el-radio>
              <el-radio :label="1">
                是
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否巡查人员">
            <el-radio-group v-model="dialogForm.isInspection">
              <el-radio :label="0">
                否
              </el-radio>
              <el-radio :label="1">
                是
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户项目范围">
            <el-select
              v-model.trim="dialogForm.projectScope"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="dict in projectScopeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogSubmitForm">确 定</el-button>
      <el-button @click="dialogResetFormMixins">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
//api
import { methodGetApi } from '@/api/publicApi'
// 混入
import { dialogFormMixins } from '@/mixins/publicMixins/dialogFormMixins'
// 组件
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// -------------------------------------------------------------
export default {
  name: 'UserDialog',
  mixins: [dialogFormMixins],
  components: { Treeselect },
  data() {
    return {
      // 表单参数
      dialogForm: {
        roleIds: []
      },
      dialogRules: {
        userName: [
          { required: true, message: '用户名称不能为空', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '真实名称不能为空', trigger: 'blur' }
        ],

        // password: [
        //   { required: true, message: '用户密码不能为空', trigger: 'blur' }
        // ],
        roleIds: [
          { required: true, message: '请至少选择一个角色', trigger: 'blur' }
        ],
        orderNum: [
          { pattern: /^[1-9]\d*$/, message: '排序只能输入数字', trigger: 'blur' }
        ],
        deptId: [{ required: true, message: '请选择部门', trigger: 'blur' }],
        phoneNumber: [{ required: false, msg: '手机号码', trigger: 'blur', validator: (rule, value, callback) => this.regularFun(rule, value, callback, 'phone') }],
        officeTelephone: [{ required: false, msg: '办公电话', trigger: 'blur', validator: (rule, value, callback) => this.regularFun(rule, value, callback, 'tel') }]
      },
      roleOptions: [], // 角色选项
      projectScopeOptions: []
    }
  },
  created() {
  },
  mounted() {
    this.getOptionsMixins('deptOptions', '/system/dept/treeselect')
    this.getDictMixins('sysUserSexOptions', 'sys_user_sex')
    this.getDictMixins('sysNormalDisableOptions', 'sys_normal_disable')
    this.getOptionsMixins('roleOptions', '/system/user/')
    this.getDictMixins('projectScopeOptions', 'user_project_scope')
  },
  methods: {
    // 查询部门下拉树结构-排除禁用
    showDeptTree(userId) {
      methodGetApi('/system/dept/normalTreeselect', { userId }).then((response) => {
        this.deptOptions = response.data
      })
    },
    /**
     * @description: 重新打开弹窗是赋初始值
     * @Author: baoxuhui
     * @return {*}
     */
    dialogResetForm() {
      this.dialogForm = {
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phoneNumber: undefined,
        officeTelephone: undefined,
        sex: undefined,
        projectScope: undefined,
        orderNum: undefined,
        status: '1',
        isLeader: 0,
        isInspection: 0,
        postId: undefined,
        roleIds: []
      }
      this.resetForm('dialogForm')
    },
    /**
    * @description: 保存
    * @Author: baoxuhui
    * @return {*}
    */
    dialogSubmitForm() {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          let url = null; let type = null
          if (this.dialogForm.userId !== undefined) {
            url = '/system/user/edit'
            type = '修改'
          } else {
            url = '/system/user'
            type = '新增'
          }
          this.dialogSaveOrUpdateMixins(url, this.dialogForm, type)
        }
      })
    },

    /**
     * @description: 调取详情
     * @Author: baoxuhui
     * @return {*}
     */
    dialogDetailApi(row) {
      const url = '/system/user/getUserDetail/' + row.userId
      this.dialogGetDetailMixins(url)
      // this.showDeptTree(row.userId)
    },
    /**
     * @description: 详情回显
     * @Author: baoxuhui
     * @param {*} id
     * @return {*}
     */
    dialogFormDetail(res) {
      const data = res.data
      // const newDepartment = this.deptOptions.filter(item => item.id === data.deptId)
      // if (newDepartment.length === 0) {
      //   this.deptOptions.unshift({
      //     id: data.deptId,
      //     label: data.deptName
      //   })
      // }
      this.$nextTick(() => {
        this.dialogForm = data
        this.dialogForm.postId = res.postId[0]
        this.dialogForm.roleIds = res.roleIds
        this.dialogForm.password = ''
      })
      this.dialogFormLoading = false
    }

  }
}
</script>
